<template>
  <div
    v-if="!loading"
    class="vc-list"
    :style="visual.parseStyle(compStyle)"
  >
    <div class="vc-list-item">
      <draggable
        v-model="currNode"
        :inputParam="getInputParam(dataList[0])"
        :class="!currNode.children || currNode.children.length === 0 ? 'empty' : ''"
        @mouseoverNode="mouseoverNode"
        @activeNode="activeNode"
        @deleteNode="deleteNode"
      />
    </div>
    <div
      class="vc-list-item"
      v-for="(data, index) in dataList.slice(1)"
      :key="index"
    >
      <draggable
        class="vc-list-item none-pointer-events"
        v-model="currNode"
        :inputParam="getInputParam(data)"
      />
    </div>
    <div
      v-if="dataPage && dataLoadMode === 'pagination'"
      class="vc-pagination"
    >
      <el-pagination
        :layout="`total, prev, pager, next,
          ${showJumper ? 'jumper,' : ''}
          ${showSizes ? 'sizes' : ''}`"
        :current-page="queryInfo.pageNumber"
        :page-sizes="[2, 10, 20, 50, 100, 500]"
        :page-size="queryInfo.pageSize"
        :total="page.totalRecord"
        :pager-count="pagerCount"
        @current-change="() => {}"
        @size-change="() => {}"
      />
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref, watch} from 'vue';
import Draggable from '@/admin/visual/draggable.vue';
import visual from "@/visual/js/visual";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const loading = ref(true);
const queryInfo = ref({
  pageNumber: 1,
  pageSize: 10
});
const page = ref({});
const dataList = ref([]);
const dataPage = ref(false);
const dataLoadMode = ref('pagination');
const showJumper = ref(false);
const showSizes = ref(false);
const pagerCount = ref(7);

const init = async() => {
  loading.value = true;
  const compData = props.node.compData || {};
  if (compData.dataSourceType === '') {
    compData.dataSourceType = '静态数据';
  }
  dataPage.value = compData.dataPage || false;
  dataLoadMode.value = compData.dataLoadMode || 'pagination';
  showJumper.value = compData.showJumper || false;
  showSizes.value = compData.showSizes || false;
  pagerCount.value = compData.pagerCount || 7;
  if (dataPage.value) {
    queryInfo.value.pageSize = compData.dataPageSize || 20;
  } else {
    queryInfo.value.pageSize = compData.dataQueryTotal || 20;
  }
  await nextTick(() => loading.value = false);
};

const loadDataList = async() => {
  loading.value = true;
  page.value = (await visual.loadData(props.compData, {}, {...queryInfo.value}, currNode.value));
  dataList.value = page.value.data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
  await nextTick(() => loading.value = false);
};

const getInputParam = (data) => {
  const result = {};
  result[`list.${currNode.value.id}.row`] = data;
  return result;
};

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};

watch(() => props.compStyle, () => {
  init();
}, { deep: true });

watch(() => props.node.compData, async() => {
  loading.value = true;
  await init();
  await loadDataList();
  await nextTick(() => loading.value = false);
}, { deep: true });

onMounted(async() => {
  await init();
  await loadDataList();
});
</script>

<style scoped lang="scss">
.none-pointer-events {
  pointer-events: none;
}
.vc-pagination {
  margin: 10px 0;
  padding: 5px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  background: #ffffff;
  border-radius: 5px;
  overflow: auto;
}
</style>